<template>
	<view class="root">
		<view class="br-20 bgc-fff mt-30 ml-20 mr-20">
			<textarea
				class="fs-28 pl-20 pr-20 pt-30 pb-30"
				placeholder="请输入您要反馈的问题，以便我们为您解决"
				v-model="content"
			/>

			<view :style="{ padding: `30rpx 20rpx` }" class="fd-row">
				<image
					class="bgc-eee br-10 mr-12"
					:style="{ width: `130rpx`, height: `130rpx` }"
					v-for="(img, index) in images"
					:key="index"
					:src="img"
					@click="operationImage(index)"
					mode="aspectFill"
				/>
				<image
					v-if="images.length < count"
					class="bgc-eee br-10"
					:style="{ width: `130rpx`, height: `130rpx` }"
					src="/static/image/jia@2x.png"
					mode="aspectFill"
					@click="chooseImage"
				/>
			</view>
		</view>

		<view class="mt-50">
			<text class="fs-30 color-333 ml-20 fw-700">联系方式（选填）</text>
			<input
				class="br-20 bgc-fff fs-28"
				:style="{ margin: `20rpx`, padding: `30rpx 20rpx` }"
				type="number"
				maxlength="11"
				v-model="phoneNumber"
				placeholder="请输入您的手机号，便于我们与您联系"
			/>
		</view>

		<button
			:style="{ backgroundColor: `#295eea`, color: `#fff` }"
			class="mt-100 ml-20 mr-20 lh-90 fs-30"
			@click="submit"
			:disabled="!content"
		>
			提交
		</button>
	</view>
</template>

<script>
	export default {
		data: () => ({ content: null, images: [], count: 3, phoneNumber: "" }),
		methods: {
			submit() {
				uni.showToast({
					title: "提交成功！",
					success: () => setTimeout(uni.navigateBack, 1500),
				});
			},
			chooseImage() {
				uni.chooseImage({
					count: this.count - this.images.length,
					success: ({ tempFilePaths }) => {
						this.images.push(...tempFilePaths);
					},
				});
			},
			operationImage(index) {
				uni.showActionSheet({
					itemList: ["查看", "删除"],
					success: ({ tapIndex }) => {
						if (!tapIndex) {
							uni.previewImage({ urls: this.images, current: index });
							return;
						}

						this.images.splice(index, 1);
					},
				});
			},

			submit() {
				const submitData = (uploads) => {
					this.$request
						.post("/Home/info/lianxiusDo", {
							pic: uploads.toString(),
							lynr: this.content,
							phoneNumber: this.phoneNumber,
						})
						.then(({ msg: title }) => {
							uni.showToast({
								title,
								success: () => setTimeout(uni.navigateBack, 1500),
							});
						});
				};

				if (this.images.length) {
					uni.showToast({ title: "uploading...", icon: "loading" });
					const uploads = [];
					this.images.forEach((filePath) => {
						uni.uploadFile({
							url: `${this.$request.defaults.baseURL}/Home/Login/upload`,
							name: "img",
							filePath,
							success: (res) => {
								if (res.data[0] !== "{") {
									res.data = res.data.slice(1);
								}
								const { code, data, msg: title } = JSON.parse(res.data);
								if (!+code) {
									uni.showToast({ title, icon: "none" });
									return;
								}
								uploads.push(data.img);

								uploads.length === this.images.length && submitData(uploads);
							},
						});
					});
				}

				submitData([]);
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/static/reset";
</style>